<template>
  <el-dialog
    title="房间库存管理"
    append-to-body
    class="gl_dialog_TitleLine gl_dl_footer"
    :visible.sync="dialogroomVisible"
    :close-on-click-modal="false"
    width="1030px"
  >
    <el-form ref="ruleForm" label-position="top" :model="API_GET_vationTimeQO" class="gl_form_mini heidia" style="padding: 0 30px" label-width="80px">
      <div style="margin-bottom: 20px;" class="datath">
        <div>
          <el-button :disabled="typecheck === 'check'" size="mini" type="primary" @click="addcount">一键设置库存</el-button>
        </div>
        <div class="datespan">
          <el-input v-model.number="count" :disabled="typecheck === 'check'" :controls="false" placeholder="请输入" size="mini" controls-position="right" :min="0" style="width: 100%;padding-left:0px;padding-right:0px;" />
        </div>
        <div style="flex: 1;text-align: right;" v-if="chargesFormat>=0">
          共{{ chargesFormat }}间
        </div>
      </div>
      <div v-for="(item ,index) in tableData" :key="index" class="datath">
        <div>
          <div class="datespan datetop">
            日期
          </div>
          <div class="datespan datebottom">
            房间数量
          </div>
        </div>
        <div v-for="(jtem, jndex) in item" :key="jndex">
          <div class="datespan datetop start">
            {{ jtem.dateTime }}
          </div>
          <div class="datespan datebottom">
            <el-form-item :prop="`tableData.${[index]}.${[jndex]}.quantity`" :rules="{ required: true,message :'请输入',trigger:'blur'}">
               <el-input v-model.number="API_GET_vationTimeQO.tableData[index][jndex].quantity"  oninput="javascript:this.value=this.value.replace(/\D/g,'')" :disabled="typecheck === 'check'" :controls="false" placeholder="请输入" size="mini" controls-position="right" :min="0" style="width: 100%;padding-left:0px;padding-right:0px;" />
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="dialogroomVisible = false">{{ typecheck === 'check'?'关闭':'取消' }}</el-button>
      <el-button v-if="typecheck !== 'check'" type="primary" :loading="submitLoading" size="mini" @click="submit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  api_POST_EventsManagementLaunchedRoomStocksaveLaunchedRoomStock
} from '@/extend/api/gameswaggerApi/app.js';
import {
  API_GET_TimeCompetitionReservationTimeQO
} from '@/lib/form/game/swaggerForm';
export default {
  data() {
    return {
      dates: [],
      roomcount: null,
      lauchedRoomStocks: [],
      dialogroomVisible: false,
      submitLoading: false,
      launchedRoomId: '',
      bookingTime: {},
      API_GET_vationTimeQO: new API_GET_TimeCompetitionReservationTimeQO(),
      tableData: [],
      typecheck: null,
      count: undefined// 一键库存
    };
  },
  computed: {
    chargesFormat() {
      const roomcount = [].concat(...this.API_GET_vationTimeQO.tableData) || [];
      var count = null
      roomcount.map(item => {
        count += item.quantity;
      });
      return count;
    }
  },
  watch: {
    dialogroomVisible: {
      handler() {
        if (this.dialogroomVisible === false) {
          this.lauchedRoomStocks = [];
          this.tableData = [];
          this.API_GET_vationTimeQO.tableData = [];
          this.count = undefined;
        }
      },
      deep: true
    }
  },
  created () {
  },
  methods: {
    open(row) {
      this.dialogroomVisible = true;
      // 获取其中的时间并将其按10个为一组
      this.dates = [];
      const startDateTime = new Date(this.bookingTime.startDateTime);
      const endDateTime = new Date(this.bookingTime.endDateTime);
      const daysBetween = Math.floor((endDateTime - startDateTime) / (1000 * 60 * 60 * 24));
      for (let i = 0; i <= daysBetween; i++) {
        const date = new Date(startDateTime.getTime() + (i * 1000 * 60 * 60 * 24));
        this.dates.push({ dateTime: date.getFullYear() + '-' + ((date.getMonth() + 1) + '').padStart(2, '0') + '-' + (date.getDate() + '').padStart(2, '0'), quantity: null });
      }
      if (this.lauchedRoomStocks.length > 0) {
        for (let i = 0; i < this.lauchedRoomStocks.length; i++) {
          for (let j = 0; j < this.dates.length; j++) {
            if (this.lauchedRoomStocks[i].dateTime.split('T')[0] === this.dates[j].dateTime) {
              this.dates[j].quantity = this.lauchedRoomStocks[i].quantity;
            }
          }
        }
      }
      const size = 10;
      // 其按10个为一组
      const dateData = [];
      for (let i = 0; i < this.dates.length; i += size) {
        dateData.push(this.dates.slice(i, i + size));
      }
      this.tableData = dateData;
      this.typecheck = row;
      this.API_GET_vationTimeQO.tableData = this.tableData
      console.log(this.tableData, this.count);
    },
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          this.API_GET_vationTimeQO.launchedRoomId = this.launchedRoomId;
          this.API_GET_vationTimeQO.launchedRoomStockDateList = [].concat(...this.API_GET_vationTimeQO.tableData);
          api_POST_EventsManagementLaunchedRoomStocksaveLaunchedRoomStock(this.API_GET_vationTimeQO).then(res => {
            this.submitLoading = false;
            this.dialogroomVisible = false;
            this.$message({
              // 添加成功！
              message: '创建成功',
              type: 'success'
            });
            this.$parent.refreshList();
          },
          error => {
            this.submitLoading = false;
            const _msg = error.error.message || error.message;
            this.$message({ type: 'error', message: _msg });
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    addcount() {
      const pattern = /^\d+$/;
    if(!(pattern.test(this.count) && parseInt(this.count) >= 0)) {
      this.count = undefined;
      this.$message({
          // 添加成功！
          message: '请输入大于或等于零的数字',
          type: 'error'
        });
      return
    }
    this.API_GET_vationTimeQO.tableData.map(res => {
        res.map(jes => {
          jes.quantity = this.count;
        });
      });
    }

  }
};
</script>

<style>
.datath {
  display: flex;
  margin-bottom: 20px;
  /* justify-content: space-between; */
}
.datespan {
  width: 80px;
  height: 26px;
  line-height: 26px;
  margin-left: 5px;
  text-align: center;
}
.datetop {
  background-color: #eaf5ff;
  border: 1px solid #dfe6ec;
}
.datebottom {
  height: 40px;
  padding-top: 5px;
}
.heidia {
  max-height: 500px;
  overflow: auto;
}
.start::before {
  position: absolute;
  color: #ee0a24;
  font-size: 14px;
  content: '*';
  margin-left: -5px;
}
</style>
